<%
function isPathInNavItem(currentPath, navItem) {
    // 先检查当前项的 href
    if (navItem.href && currentPath.startsWith(navItem.href)) {
        return true;
    }

    // 如果导航项没有子项，直接返回 false
    if (!navItem.items) {
        return false;
    }

    // 递归检查所有子项
    return navItem.items.some(item => {
        // 如果是对象类型且有 href
        if (item.href) {
            // 检查当前路径是否以该 href 开头
            return currentPath.startsWith(item.href);
        }

        // 如果有子项，递归检查
        if (item.items) {
            return isPathInNavItem(currentPath, item);
        }

        return false;
    });
}
%>

<header>
    <nav class="fixed top-0 w-full bg-white dark:bg-gray-800 border-b z-10">
        <div class="max-w-screen-xl px-4 mx-auto 2xl:px-0">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-8">
                    <div class="flex items-center space-x-4 shrink-0">
                        <% if (site.logo) { %>
                            <a href="/" class="flex items-center">
                                <img src="<%= basePath %>/<%= site.logo || '/assets/logo.svg' %>"
                                     alt="<%= site.title %>"
                                     class="h-10 w-auto object-contain transition-transform hover:scale-105">
                            </a>
                        <% } %>
                        <a href="/" class="text-xl font-bold text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-200 transition-colors">
                            <%= !site.hiddenTitle ? site.title : '' %>
                        </a>
                    </div>

                    <ul class="hidden lg:flex items-center justify-start gap-6 md:gap-8 py-3 sm:justify-center">
                        <% for(let item of nav) { %>
                            <li class="shrink-0">
                                <a href="<%= item.href %>"
                                   class="inline-flex items-center rounded-lg justify-center px-4 py-3
                                          text-sm font-medium leading-none dark:text-white
                                          <%=
                                       isPathInNavItem(page.path, item)
                                               ? 'text-blue-600 dark:text-blue-400 bg-blue-50/80 dark:bg-blue-900/20 font-medium'
                                               : 'hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800/40'
                                   %>">
                                    <%= item.title %>
                                </a>
                            </li>
                        <% } %>
                    </ul>
                </div>

                <%- include('./repo') %>
            </div>
        </div>
    </nav>
</header>